/* =================================
Section 1: Welcome START
=====================================*/
.welcome {
  padding-top: 8%;
  background: var(--bgr-gra1);
  padding-bottom: 5%;
}

.welcome .title p {
  width: 100%;
  align-self: stretch;
  color: #855F39;
  font-family: 'WindSong';
  font-size: 100px;
  font-weight: 500;
  line-height: 100%;
  margin: 0;
}

.welcome .sub-title {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

img {
  display: inline-block;
}

.data-img .data-svg {
  max-width: 100%;
}

.data-img {
  text-align: center;
  width: 100%;
}

.more-info {
  margin-top: 50px;
  padding-top: 15px;
  padding-bottom: 17px;
  border-top: 1px solid #CAB8A6;
  border-bottom: 1px solid #CAB8A6;
}

.more-info .col,
.more-info .col-lg {
  align-items: center;
  gap: 5px;
}

.more-info .col-lg {
  padding: 0px;
}

.more-info img {
  width: 28px;
}

.more-info p {
  color: #855F39;
  font-size: 18px;
  margin-bottom: 0px;
}

@media (max-width: 1200px) {
  .welcome .title h2 {
    font-size: 28px;
  }
}

@media (max-width: 992px) {
  .welcome {
    padding-top: 15%;
  }

  .welcome .sub-title {
    margin-top: 15px;
  }

  .welcome .title h2 {
    text-align: center;
  }

  .welcome .title p {
    font-size: 80px;
    text-align: center;
  }

  .more-info p {
    font-size: 16px;
  }

  .more-info img {
    width: 26px;
  }

  .more-info .col-lg {
    margin-top: 10px;
  }
}

@media (max-width: 768px) {
  .more-info img {
    width: 24px;
  }

  .more-info p {
    font-size: 14px;
  }
}

/* =================================
Section 1: Welcome END
=====================================*/

/* ================================
Section 2: Check in out START
====================================*/
.check-in-out {
  padding-top: 7%;
  padding-bottom: 5%;
}

.check-in {
  padding-top: 5%;
  padding-bottom: 5%;
}

.check-out {
  margin-top: 5%;
  padding-top: 5%;
  padding-bottom: 5%;
}

.text-in h1 {
  font-weight: 700;
  line-height: 130%;
}

.text-out h1 {
  color: #D3B488;
  font-weight: 700;
  line-height: 130%;
  text-align: right;
}

.check-out h3 {
  color: #D3B488;
}

.time-part {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.time-part .time {
  margin-bottom: 0px;
  color: #2D2D2D;
  font-weight: 500;
}

.time-part .line {
  height: 1px;
  flex: 1 0 0;
  background: #D3B488;
}

.time-part img {
  width: 42px;
}

.img-our-time {
  border-radius: 20px;
  border: 1px solid var(--stroke);
  box-shadow: 0 5px 5px rgb(119, 86, 40, 0.3);
  width: 78%;
}

@media (max-width: 1200px) {
  .time-part img {
    width: 38px;
  }

  .check-in-out {
    padding-top: 100px;
  }
}

@media (max-width: 992px) {
  .img-our-time {
    width: 60%;
  }

  .check-out {
    margin-top: 0px;
    padding-top: 0px;
  }

  .check-in-out {
    padding-top: 70px;
  }
}

@media (max-width: 768px) {
  .time-part img {
    width: 36px;
  }
}

/* ================================
Section 2: Check in out END
====================================*/

/* ================================
Section 3: Home rules START
====================================*/
.home-rules {
  padding-top: 7%;
  padding-bottom: 5%;
}

.home-rules .row {
  margin-bottom: 3%;
  /* height: 250px; */
}

.home-rules .title {
  text-align: center;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 4%;
}

.home-rules .card-info {
  display: flex;
  padding: 40px 10px;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  border: 1px solid var(--light-brw);
  background: #FFF;
  box-shadow: 34.854px 29.626px 48.34px 0px rgba(236, 233, 227, 0.20);
}

.home-rules .icon {
  display: flex;
  padding: 15px;
  align-items: flex-start;
  border-radius: 20px;
  background: var(--light-brw);
  margin-bottom: 8%;
}

.home-rules img {
  width: 50px;
}

.home-rules .card-info h3{
  font-weight: 600;
  text-align: center;
}

.home-rules .card-info p{
  margin-bottom: 0px;
  text-align: center;
}

@media (max-width: 992px) {
  .home-rules img {
    width: 36px;
  }

  .home-rules .icon {
    padding: 12px;
  }

  .home-rules .col {
    padding: 0px 10px;
  }

  .home-rules .row {
    height: 220px;
  }

  .home-rules .card-info {
    padding: 30px 10px;
  }
}

@media (max-width: 768px) {
  .home-rules img {
    width: 32px;
  }

  .home-rules .col {
    padding: 0px 6px;
  }

  .home-rules .row {
    height: 200px;
  }

  .home-rules .card-info h3{
    font-size: 16px;
  }

  .home-rules .card-info {
    padding: 22px 10px;
  }
}

/* ================================
Section 3: Home rules END
====================================*/

/* ================================
Section 4: Room facilities START
====================================*/
.room-fac {
  padding-top: 7%;
  padding-bottom: 7%;
}

.room-fac .title {
  text-align: center;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 5%;
}

.room-fac .col {
  padding: 0px;
}

.room-fac .card-info {
  display: flex;
  padding: 40px 16px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.bgr-w {
  background: #FFF; 
}

.bgr-br {
  background: #ECE9E3; 
}

.bgr-br-d {
  background: var(--light-brw); 
}

.room-fac .icon {
  display: flex;
  padding: 15px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 100px;
}

.room-fac img {
  width: 40px;
}

.room-fac p {
  font-weight: 600;
  margin-bottom: 0px;
}

.material-symbols-rounded {
  font-size: 38px;
  color: #855F39;
}

.room-fac .text {
  display: flex;
  flex-direction: column;
}

.room-fac .text span {
  width: 100%;
  text-align: center;
  font-size: 18px;
}

@media (max-width: 992px) {
  .room-fac .card-info {
    padding: 30px 10px;
  }

  .room-fac .icon {
    padding: 12px;
  }

  .room-fac img {
    width: 35px;
  }

  .material-symbols-rounded {
    font-size: 32px;
  }

  .room-fac .text span {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .room-fac .card-info {
    padding: 24px 10px;
  }

  .room-fac .icon {
    padding: 10px;
  }

  .room-fac img {
    width: 28px;
  }

  .material-symbols-rounded {
    font-size: 26px;
  }

  .room-fac p {
    text-align: center;
    line-height: 18px;
  }

  .room-fac .text span {
    font-size: 12px;
  }
}

/* ================================
Section 5: Actual Photos START
====================================*/
.actual-photos {
  padding-top: 7%;
  padding-bottom: 7%;
}

.actual-photos .title {
  font-weight: 700;
  line-height: 130%;
}

.actual-photos .head-line {
  padding-left: 10%;
  padding-right: 10%;
}

.actual-photos .col,
.actual-photos .col-5 {
  padding: 0px;
}

.actual-photos .d-flex {
  gap: 1.5%;
  margin-right: -15px;
  margin-left: -15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.actual-photos img {
  border-radius: 10px;
}

.actual-photos .sub-title {
  margin: 0;
}

@media (max-width: 1200px) {

}

@media (max-width: 992px) {
  .actual-photos .head-line {
    padding: 0px;
  }
}

@media (max-width: 576px) {
  .actual-photos .d-flex {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ================================
Section 5: Actual Photos END
====================================*/

/* ================================
Section 5: Attraction START
====================================*/
.attraction {
  padding-top: 150px;
  background: linear-gradient(180deg, #ECE9E3 -5.79%, #FFF 16.37%, #FFF 31.32%);
}

.attraction .title {
  text-align: center;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 4%;
}

.attraction .col,
.attraction .col-5 {
  padding: 0;
}

.attraction .col-3  {
  padding: 1%;
}

.attraction .row {
  margin-bottom: 4%;
}

.attract-1 {
  gap: 3%;
}

.attract-2 {
  gap: 0px;
}

.attract-3 {
  gap: 1.5%;
}

.attraction img {
  object-fit: cover;
  border-radius: 20px;
  max-height: 100%;
  max-width: 100%;
}

.attraction .holder-img {
  height: 350px;
}

.attract-3 p {
  margin-bottom: 0px;
  font-size: 14px;
}

.attract-3 h3 {
  font-size: 16px;
  margin-bottom: 0px;
}

.attract-3 .col {
  gap: 12px;
}

@media (max-width: 1200px) {
  .attraction .holder-img {
    height: 300px;
  }

  .attraction {
    padding-top: 120px;
  }
}

@media (max-width: 992px) {
  .attraction {
    padding-top: 100px;
  }

  .attract-1 p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5px;
  }

  .attract-1 h3 {
    font-size: 16px;
    margin-bottom: 0px;
  }

  .attract-2 h3 {
    font-size: 15px;
    margin-bottom: 0px;
  }

  .attract-3 h3 {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 0px;
  }

  .attract-3 p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 0px;
  }

  .attraction .holder-img {
    height: 225px;
  }

  .attract-2 .col-3 {
    padding: 8px;
  }
}

@media (max-width: 768px) {
  .attraction .holder-img {
    height: 170px;
  }

  .attraction img {
    border-radius: 10px;
  }
}

@media (max-width: 576px) {
  .attraction .row {
    padding-left: 15px;
    padding-right: 15px;
  }

  .attraction .holder-img {
    height: 160px;
  }
}

/* ================================
Section 5: Attraction END
====================================*/

/* ================================
Section 6: Food drink START
====================================*/
.fooddrink {
  padding-top: 6%;
  padding-bottom: 5%;
  background: linear-gradient(180deg, #FFF 56.31%, #FFF 82.41%, #ECE9E3 114.79%);
}

.fooddrink .row {
  margin-bottom: 4%;
}

.fooddrink .head-line {
  margin-bottom: 5%;
  padding-left: 10%;
  padding-right: 10%;
}

.fooddrink .holder-info {
  gap: 3%;
}

.fooddrink .holder-img {
  gap: 1.5%;
}

.holder-info .col {
  gap: 20px;
}

.fooddrink .col,
.fooddrink .col-7 {
  padding: 0px;
}

.fooddrink .title {
  font-weight: 700;
  line-height: 130%;
}

.fooddrink img {
  border-radius: 20px;
  height: 100%;
  width: 100%;
}

.fooddrink .line {
  width: 100px;
  height: 5px;
  border-top: 5px solid #9A7D66;
}

.fooddrink .col p,
.fooddrink .col h3 {
  margin-bottom: 0px;
}

.fooddrink .sub-name {
  color: #2D2D2D;
  font-size: 18px;
  font-weight: 600;
}

.food .text-part .d-flex {
  gap: 15px;
}

.holder-info .col p {
  font-size: 16px;
}

@media (max-width: 1200px) {
  .food .text-part .d-flex {
    gap: 10px;
  }

  .food .col {
    gap: 15px;
  }

  .fooddrink .sub-name {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 992px) {
  .fooddrink {
    padding-top: 80px;
  }

  .cf-info {
    display: flex;
    gap: 10px;
  }

  .food .col {
    gap: 10px;
  }

  .fooddrink .sub-name {
    font-size: 15px;
    line-height: 22px;
  }

  .holder-info .col p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .fooddrink img {
    border-radius: 10px;
  }
}

@media (max-width: 576px) {
  .fooddrink .row {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ================================
Section 6: Food drink END
====================================*/

/* ================================
Section 6: Before leave START
====================================*/
.b-leave {
  padding-top: 7%;
  padding-bottom: 7%;
}

.b-leave .title {
  text-align: center;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 5%;
}

.b-leave .col {
  padding: 0px;
}

.b-leave .card-info {
  display: flex;
  padding: 40px 16px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.b-leave .icon {
  display: flex;
  padding: 15px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 100px;
}

.b-leave img {
  width: 40px;
}

.b-leave p {
  font-weight: 600;
  margin-bottom: 0px;
  text-align: center;
}

@media (max-width: 992px) {
  .b-leave .card-info {
    padding: 30px 20px;
  }

  .b-leave .icon {
    padding: 12px;
  }

  .b-leave img {
    width: 35px;
  }
}

@media (max-width: 768px) {
  .b-leave .card-info {
    padding: 24px 10px;
  }

  .b-leave .icon {
    padding: 10px;
  }

  .b-leave img {
    width: 28px;
  }
}
/* ================================
Section 6: Before leave END
====================================*/

/*=====================================
Call-to-action
=========================================*/

.call-to-action {
  padding-bottom: 5%;
}

.contact {
  display: flex;
  padding: 60px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  background: var(--light-brw);
}

.action-title {
  text-align: center;
  color: #855F39;
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
}

.btn-contact {
  padding: 15px 50px;
  border-radius: 20px;
  background: #9A7D66;
  color: #FFF;
  font-size: 18px;
  border: none;
  outline: none;
  font-weight: 600 !important;
}

.btn-contact:hover,
.btn-contact:focus,
.btn-contact:active {
  border: none;
  padding: 15px 50px;
  background: #fff;
  border-radius: 20px;
  color: #855F39;
  outline: none;
}

@media (max-width: 1200px) {
  .action-title {
    font-size: 21px;
  }

  .btn-contact {
    padding: 15px 45px;
  }
}

@media (max-width: 991px) {
  .action-title {
    font-size: 20px;
  }

  .btn-contact {
    padding: 15px 40px;
    font-size: 16px;
  }

  .contact {
    padding: 50px 40px;
  }
}

@media (max-width: 768px) {
  .action-title {
    font-size: 18px;
  }

  .btn-contact {
    padding: 12px 35px;
    font-size: 14px;
    border-radius: 18px;
  }

  .contact {
    padding: 30px 40px;
  }
}

/*=====================================
Call-to-action END
=========================================*/

/* Animation */
.welcome .title {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  animation-duration: 1s;
}

.welcome .sub-title,
.welcome .data-svg {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  animation-duration: 1s;
}

.more-info {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  animation-duration: 1s;
}

.check-in.visible {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  animation-duration: 1s;
}

.check-out.visible,
.check-in-out .data-svg.visible {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  animation-duration: 1s;
}

.home-rules .title.visible {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  animation-duration: 1s;
}

.home-rules .ani-1.visible {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
  animation-duration: 1s;
}

.home-rules .ani-2.visible {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
  animation-duration: 1s;
}

.room-fac .title.visible,
.room-fac .ani-1.visible,
.room-fac .ani-2.visible {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  animation-duration: 1s;
}

.actual-photos .head-line.visible {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  animation-duration: 1s;
}

.actual-photos .ani-1.visible,
.actual-photos .ani-2.visible,
.actual-photos .ani-3.visible,
.actual-photos .ani-4.visible {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-duration: 1s;
}

.attraction .title.visible {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
  animation-duration: 1s;
}

.attract-1.visible,
.attract-2.visible,
.attract-3.visible,
.holder-img.visible {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-duration: 1s;
}

.actual-photos .head-line.visible,
.fooddrink .head-line.visible,
.b-leave.visible {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  animation-duration: 1s;
}

.fooddrink .ani-1.visible {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  animation-duration: 1s;
}

.fooddrink .ani-2.visible {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  animation-duration: 1s;
}

.call-to-action .btn-contact.visible {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  animation-duration: 1s;
}